import React, { useEffect } from 'react'
import { Layout, Menu, Button, Message, Input, Tooltip, Tag, Empty } from '@arco-design/web-react'
import { IconHome, IconCalendar, IconPlus, IconCheck } from '@arco-design/web-react/icon'
// import Scroller from '@components/Scroller'
import '@arco-design/web-react/dist/css/arco.css'
import './index.css'
import Avatar from '@arco-design/web-react/es/Avatar/avatar'
import Feed from './Feed'
import MessageList from '../../components/Message/MessageList'
import MessageEditor from '../../components/MessageEditor'

const InputSearch = Input.Search

const MenuItem = Menu.Item

const Sider = Layout.Sider
const Header = Layout.Header
const Footer = Layout.Footer
const Content = Layout.Content

const chatTopItems = [
  // {
  //   id: '1',
  //   title: '审批',
  //   description: '审批',
  //   src: 'https://s1-imfile.feishucdn.com/static-resource/v1/e37af67a-b012-4ee0-80ea-a4d28c94b4eg~?image_size=48x48&cut_type=&quality=_q70&format=webp&sticker_format=.webp',
  // },
  // {
  //   id: '2',
  //   title: '云文档',
  //   description: '云文档助手',
  //   src: 'https://s1-imfile.feishucdn.com/static-resource/v1/66ee2566-d3e3-4813-a364-8a339cd0ebeg~?image_size=48x48&cut_type=&quality=_q70&format=webp&sticker_format=.webp',
  // },
  // {
  //   id: '3',
  //   title: '伍政宇',
  //   description: '伍政宇的飞书助手',
  //   src: 'https://s1-imfile.feishucdn.com/static-resource/v1/b2c152c1-40ff-44e6-a16e-ce0bc911021g~?image_size=48x48&cut_type=&quality=_q70&format=webp&sticker_format=.webp',
  // },
]

// 组件定义
function Messenger(props) {
  const [id, setId] = React.useState(0)
  const [type, setType] = React.useState('0')
  const [name, setName] = React.useState('')
  const [avatar, setAvatar] = React.useState('未知')
  // const [tag, setTag] = React.useState()
  const { description, online } = props.history.location.state || ''

  useEffect(() => {
    const { id, type, name, tag, avatar } = props.history.location.state || { id: '-1', type: '0', name: '' }
    setId(id)
    setType(type)
    setName(name)
    setAvatar(avatar)
  }, [props.history.location.state])

  // 停止滚动时显示滚动条的功能
  const [scrollTop, setScrollTop] = React.useState(0)
  const [scrollEnd, setScrollEnd] = React.useState(true)
  const scrollRef = React.useRef()
  let timeout = null
  const onScrollHandle = () => {
    if (scrollEnd !== false) {
      setScrollEnd(false)
    }
    if (timeout) {
      clearTimeout(timeout)
    }
    timeout = setTimeout(() => {
      if (scrollEnd !== true) {
        setScrollEnd(true)
        setScrollTop(scrollRef.current?.scrollTop || 0)
      }
    }, 200)
  }

  // 置顶组件
  const FeedTopItem = (props) => {
    const { id, title, description, src } = props

    const titleStyle = {
      fontSize: 12,
      alignContent: 'center',
    }
    return (
      <div
        style={{ display: 'flex', flexDirection: 'column', marginTop: 8, cursor: 'pointer' }}
        onClick={() => {
          console.log(id)
        }}
      >
        <Tooltip content={description}>
          <Avatar>
            <img alt='' src={src}></img>
          </Avatar>
          <div className='chat-name' style={titleStyle}>
            {title}
          </div>
        </Tooltip>
      </div>
    )
  }

  return (
    <Layout className='chat-main'>
      {/* 左边 */}
      <Sider className='chat-left' resizeDirections={['right']} style={{ minWidth: 290, maxWidth: 490 }}>
        <div className='chat-feed'>
          {/* 搜索区域 */}
          <div className='feed-search'>
            {/* 搜索区左边 */}
            <div className='feed-search-container'>
              <InputSearch allowClear placeholder='搜索' style={{ width: 220 }}></InputSearch>
            </div>
            {/* 搜索区右边 */}
            <div className='feed-add'>
              <Button shape='circle' icon={<IconPlus />} />
            </div>
          </div>
          <div className={`feed-top${scrollTop > 0 ? ' feed-top-shadow' : ''}`}>
            {chatTopItems.map((item) => (
              <FeedTopItem
                key={item.id}
                id={item.id}
                title={item.title}
                description={item.description}
                src={item.src}
                type={item.type}
              />
            ))}
          </div>

          <div
            className={`feed-list scroller ${scrollEnd ? '' : 'scrolling'}`}
            ref={scrollRef}
            onScrollCapture={() => onScrollHandle()}
          >
            {/* 左边消息列表 */}
            <Feed />
          </div>
        </div>
      </Sider>
      {/* 右边 */}
      {id < 1 && (
        <Content>
          <Empty
            imgSrc='//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a0082b7754fbdb2d98a5c18d0b0edd25.png~tplv-uwbnlip3yd-webp.webp'
            description={<Button type='primary'>开始体验</Button>}
          />
        </Content>
      )}
      {id >= 1 && (
        <Layout className='chat-right'>
          {/* 聊天内容 */}
          <Layout>
            <Header className='chat-window-header'>
              <div className='chat-window-haeder-main'>
                <div className='chat-window-haeder-left'>
                  <div className='chat-window-header-avatar'>
                    <Avatar className='chat-window-header-avatar' size={32} style={{ lineHeight: '32px' }}>
                      <img className={'cant-drag-and-select'} alt='' src={avatar} />
                    </Avatar>
                  </div>
                  <div className='chat-window-header-title'>
                    <div className={'cant-drag-and-select'}>
                      <div className='chat-window-title-name'>
                        <span className='chat-window-group-name'>{name}</span>
                        <div className='chat-window-group-tag' style={{ marginLeft: 5 }}>
                          <Tag color={type === '0' && !online ? 'gray' : 'blue'} size={'small'}>
                            {type === '1' ? '群组' : online ? '在线' : '离线'}
                          </Tag>
                        </div>
                      </div>
                      <div className='chat-window-title-info'>
                        <div className='chat-window-title-info-desc'>
                          <div className='button-hover-box'>
                            <div
                              className='button-hover-mask'
                              style={{ width: '100%', height: '100%', padding: '1px 2px', top: -1 }}
                            ></div>
                            <span className='chat-window-status-desc'>
                              <span>{description}</span>
                            </span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div className='chat-window-haeder-right'>
                  <div className='header-right-icon'>
                    <div className='button-hover-box'>
                      <Tooltip content='完成(Ctrl+D)' mini>
                        <IconCheck
                          fontSize={20}
                          onClick={() => {
                            Message.success('已完成')
                          }}
                          style={{ cursor: 'pointer' }}
                        />
                      </Tooltip>
                    </div>
                  </div>
                </div>
              </div>
            </Header>

            <Layout>
              <Content className='chatMessages'>
                <div className='message-list'>
                  {/* <div style={{ height: '100%' }}> */}
                  {/* <Scroller> */}
                  {/* 消息内容列表 */}
                  <MessageList style={{ height: '100%' }} id={id} type={type} />
                  {/* </Scroller> */}
                  {/* </div> */}
                </div>
              </Content>
              <Footer className='chatEditor'>
                <MessageEditor id={id} name={name} type={type} />
              </Footer>
            </Layout>
          </Layout>

          {/* 聊天右侧功能菜单 */}
          <Sider collapsedWidth={50} collapsed={true} collapsible trigger={null} breakpoint='xl'>
            <Menu
              defaultOpenKeys={['1']}
              defaultSelectedKeys={['0_3']}
              onClickMenuItem={(key) => Message.info({ content: `You select ${key}`, showIcon: true })}
              style={{ width: '100%' }}
            >
              <MenuItem key='0_1'>
                <IconHome />
                搜索
              </MenuItem>
              <MenuItem key='0_2'>
                <IconCalendar />
                固钉
              </MenuItem>
            </Menu>
          </Sider>
        </Layout>
      )}
    </Layout>
  )
}

export default Messenger
